import React, { useState, useRef, useEffect } from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import '../custom/customComponents.css'; // 引入自定义组件样式

interface Option {
  value: string;
  label: string;
  icon?: React.ReactNode;
}

interface CustomSelectProps {
  value: string;
  onChange: (value: string) => void;
  options: Option[];
  loading?: boolean;
  placeholder?: string;
}

const CustomSelect: React.FC<CustomSelectProps> = ({ 
  value, 
  onChange, 
  options, 
  loading = false,
  placeholder = '请选择'
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const [isOpen, setIsOpen] = useState(false);
  const selectRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const selectedOption = options.find(option => option.value === value) || null;

  return (
    <div 
      ref={selectRef}
      className="custom-select"
      style={{ 
        position: 'relative', 
        width: '200px',
        fontFamily: 'inherit'
      }}
    >
      <div
        className="custom-select-trigger"
        onClick={() => !loading && setIsOpen(!isOpen)}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '8px 12px',
          backgroundColor: theme.cardBackground,
          border: `1px solid ${theme.borderColor}`,
          borderRadius: '6px',
          cursor: loading ? 'not-allowed' : 'pointer',
          color: theme.textPrimary,
          minHeight: '36px'
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {selectedOption?.icon && <span style={{ marginRight: '8px' }}>{selectedOption.icon}</span>}
          <span>{selectedOption ? selectedOption.label : placeholder}</span>
        </div>
        <div 
          className={`custom-select-arrow ${isOpen ? 'open' : ''}`}
          style={{ 
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
            transition: 'transform 0.2s',
            color: theme.textSecondary
          }}
        >
          ▼
        </div>
      </div>

      {isOpen && (
        <div
          className="custom-select-dropdown"
          style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            right: 0,
            backgroundColor: theme.contentBackground,
            border: `1px solid ${theme.borderColor}`,
            borderRadius: '6px',
            marginTop: '4px',
            zIndex: 1000,
            maxHeight: '200px',
            overflowY: 'auto',
            boxShadow: theme.cardShadow
          }}
        >
          {options.map(option => (
            <div
              key={option.value}
              className={`custom-select-option ${value === option.value ? 'selected' : ''}`}
              onClick={() => {
                onChange(option.value);
                setIsOpen(false);
              }}
              style={{
                display: 'flex',
                alignItems: 'center',
                padding: '8px 12px',
                cursor: 'pointer',
                color: theme.textPrimary,
                backgroundColor: value === option.value ? 
                  (mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)') : 
                  'transparent',
                transition: 'background-color 0.2s'
              }}
            >
              {option.icon && <span style={{ marginRight: '8px' }}>{option.icon}</span>}
              <span>{option.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CustomSelect;